<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 地图API -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Q3DUp9tm96fZGp6ykxU0ahb2"></script>
    <!-- Your app title -->
    <title>My Travel</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/framework7/1.5.4/css/framework7.ios.min.css"
          th:href="@{/plugin/framework7/css/framework7.ios.min.css}"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/framework7/1.5.4/css/framework7.ios.colors.min.css"
          th:href="@{/plugin/framework7/css/framework7.ios.colors.min.css}"/>
    <link rel="stylesheet" th:href="@{/plugin/framework7/css/framework7-icons.css}"/>
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" th:href="@{/plugin/framework7/css/my-app.css}">
    <link rel="stylesheet" th:href="@{/dist/css/common.css}">
</head>

<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal" style="background-color: #fff">
    <div class="content-block">
        <span th:if="${#authentication.name=='anonymousUser'}">
            <a th:href="@{/login}" id="gologin" class=" close-panel">登录</a>
        </span>
        <span th:if="${#authentication.name!='anonymousUser'}">
            <span sec:authentication="name" id="authorName">Username</span>
            <a href="javascript:;" id="gologout" class="close-panel">退出登录</a>
        </span>

        <div class="list-block">
        </div>
    </div>
</div>
<!-- Views -->
<div class="views">
    <div class="view view-main">
        <div class="navbar">
            <div class="navbar-inner" style="padding-top: 3px;">
                <div class="center sliding">
                    My Travel
                </div>
                <div class="right">
                    <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
                </div>
                <div class="subnavbar">
                    <div class="buttons-row">
                        <a href="#tab1" class="button tab-link active">大众足迹</a>
                        <a href="#tab2" class="button tab-link">我的足迹</a>
                        <a href="#tab3" class="button tab-link">个性推荐</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="pages navbar-through toolbar-through">
            <div data-page="index" class="page with-subnavbar">
                <div class="page-content hide-bars-on-scroll btm " style="padding-bottom: 0px;">
                         
                        
                            
                    <div class="tabs">
                        <div id="tab1" class="tab active">
                            <div id="map_spot" style="height:646px;">
                            </div>
                            <div class="addt-s">
                                <div class="addbtncss-s">
                                    <div class="speed-dial" style="bottom: 85px;right: 5px;">
                                        <a href="#" class="floating-button">
                                            <i class="icon icon-plus"></i>
                                            <i class="icon icon-close"></i>
                                        </a>
                                        <div class="speed-dial-buttons">
                                            <a th:href="@{/addtravel}">
                                                <img th:src="@{/dist/img/plus1.png}">
                                            </a>
                                            <a th:href="@{/search}">
                                                <img th:src="@{/dist/img/search.png}">
                                            </a>
                                            <a href="javascript:;" class="open-style">
                                                <img th:src="@{/dist/img/主题.png}">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="tab2" class="tab">
                            <div id="map_my" style="height:646px;">
                            </div>
                            <div class="addt-s">
                                <div class="addbtncss-s">
                                    <div class="speed-dial" style="bottom: 85px;right: 5px;">
                                        <a href="#" class="floating-button">
                                            <i class="icon icon-plus"></i>
                                            <i class="icon icon-close"></i>
                                        </a>
                                        <div class="speed-dial-buttons">
                                            <a th:href="@{/addtravel}">
                                                <img th:src="@{/dist/img/plus1.png}">
                                            </a>
                                            <a th:href="@{/search}">
                                                <img th:src="@{/dist/img/search.png}">
                                            </a>
                                            <a href="javascript:;" class="open-style">
                                                <img th:src="@{/dist/img/主题.png}">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="tab3" class="tab">
                            <div id="l-map"  style="height:323px;"></div>
                            <div id="r-result"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 弹出层 -->
<div class="popup popup-style">
    <div class="content-block">
        <div id="t-result">
            <div class="optionpanel">
                <label>选择主题</label>
                <select id="stylelist" onchange="changeMapStyle(this.value)"></select>
                <button id="stylebtn">确定</button>
            </div>
            <p>点开查看详细信息
                <a href='javascript:;' class="controllif">个性模板列表页</a></p>
        </div>
        <p><a href="#" class="close-popup">关闭</a></p>
        <iframe src="" class="if" style="display: none;"></iframe>
    </div>
</div>

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"
        th:src="@{/webjars/jquery/dist/jquery.min.js}"></script>
<!-- 百度地图个性化样式 -->
<script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
<!-- Path to Framework7 Library JS-->
<!--<script src="https://cdn.bootcss.com/framework7/1.4.2/js/framework7.min.js" th:src="@{/webjars/Framework7/js/framework7.min.js}"></script>-->
<script src="https://cdn.bootcss.com/framework7/1.5.4/js/framework7.min.js"
        th:src="@{/plugin/framework7/js/framework7.min.js}"></script>
<!-- Path to your app js-->
<script type="text/javascript" th:src="@{/dist/js/common.js}" src="/dist/js/common.js"></script>
<script type="text/javascript" th:src="@{/dist/js/addtravel.js}" src="/dist/js/addtravel.js"></script>
<script type="text/javascript" th:src="@{/dist/js/search.js}" src="/dist/js/search.js"></script>
<script type="text/javascript" th:src="@{/dist/js/login.js}" src="/dist/js/login.js"></script>
<script type="text/javascript" th:src="@{/dist/js/register.js}" src="/dist/js/register.js"></script>
<script type="text/javascript" th:src="@{/dist/js/index.js}" src="/dist/js/index.js"></script>
</body>

</html>
